<style lang="less" scoped>
  .page__wrapper {
    height: 100%;
    width: 100%;
  }
</style>
<style lang="less">
  .panels {
    font-size: 14px;
    line-height: 25px;
    .el-card__header {
      background-color: #eee !important;
      height: 20px;
      line-height: 0px;
    }
  }
</style>

<template>
  <div class="page__wrapper">

    <simple-form v-model="searchModel" :form-field="searchFormField">
      <template slot="tableOperation">
        <el-button>{{$t('operation.search')}}</el-button>
      </template>
    </simple-form>

    <el-row :gutter="12" class="panels">
      <el-col :span="8">
        <el-card shadow="always" header="未上市托管入系统报表">
          <el-row>改革推进情况表(未提交)</el-row>
          <el-row>资产负债情况表(未提交)</el-row>
          <el-row style="font-weight:bold">主要经营情况表(已提交)</el-row>
          <el-row>矿区主要经营情况表(未提交)</el-row>
          <el-row>分业务分单位利润情况表(未提交)</el-row>
          <el-row>在职人员增减变化情况表(未提交)</el-row>
          <el-row>分业务分单位人员情况表(未提交)</el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" header="多种经营企业入系统报表">
          <el-row>基本情况表(未提交)</el-row>
          <el-row style="font-weight:bold">改革推进情况表(已提交)</el-row>
          <el-row>资产负债情况表(未提交)</el-row>
          <el-row>主要经营情况表(未提交)</el-row>
          <el-row>在职人员增减变化情况表(未提交)</el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" header="厂办大集体入系统报表">
          <el-row>基本情况表(未提交)</el-row>
          <el-row style="font-weight:bold">改革推进情况表(已提交)</el-row>
          <el-row>
            <!-- <a href="/#/balance/report">资产负债情况表(未提交)</a> -->
            <router-link :to="{ name: 'debt_report' }">资产负债情况表(未提交)</router-link>
          </el-row>
          <el-row>主要经营情况表(未提交)</el-row>
          <el-row>在职人员增减变化情况表(未提交)</el-row>
          <el-row style="font-weight:bold">人员分流安置情况表(已提交)</el-row>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>

export default {
  data () {
    return {
      searchModel: { accountPeriod: '2019', quarter: '1' },
      quarters: [{
        value: '1',
        label: '第一季度'
      }, {
        value: '2',
        label: '第二季度'
      }, {
        value: '3',
        label: '第三季度'
      }, {
        value: '4',
        label: '第四季度'
      }]
    }
  },
  computed: {
    searchFormField () {
      return [
        { prop: 'accountPeriod', label: this.$t('debt_balance.accountPeriod'), type: 'Datepicker', component: { clearable: false, type: 'year', 'value-format': 'yyyy' } },
        { prop: 'quarter', label: this.$t('debt_balance.quarter'), type: 'Select', component: { optionList: this.quarters, filterable: true } },
        { slotName: 'tableOperation', col: { xs: 10, sm: 12, md: 12, style: { textAlign: 'right' } }, labelWidth: '0' }
      ]
    }
  }
}
</script>
